<template>
  <div>
  <van-nav-bar
  title="标题"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
<div style="border:1px;">
<van-swipe-cell>
  <van-card
    desc="此商家特别好，信誉度高"
    title="外卖商家"
    :class="goods-card"
    :thumb= "https://img01.yzcdn.cn/vant/cat.jpeg"
  />
</van-swipe-cell>
</div>

<van-tree-select height="110vw" :items="items" :main-active-index.sync="active" @click-nav='change'>
  <template #content>

<van-card
  num="1"
  price="2.00"
  :desc="i.content"
  :title="i.title"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" v-for="(i,index) in list1" :key="index"
>
  <template #tags>
   
    <van-tag plain type="danger">销量500</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">购买</van-button>
  </template>
</van-card>

  </template>
</van-tree-select>

<footers></footers>
  
  </div>
</template>

<script>
import footers from '@/components/footers'
export default {
    components:{
      'footers':footers
    },
    data(){
      return{
         
         items: [{ text: '分组 1',id:'1' }, { text: '分组 2',id:'2' },{ text: '分组 1',id:'3' }],
         list1:[{'id':1,'title':'商品1','content':'Q弹爽口，奶茶香浓'},{'id':2,'title':'商品2','content':'Q弹爽口，奶茶香浓'}]
      }
    },
    methods: {
        onClickLeft() {
            Toast('返回');
        },
        onClickRight() {
            Toast('按钮');
        },
        change(index){
          alert(index)
        }
    },

}
</script>

<style>

.van-nav-bar__content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 60px;
}

.goods-card {
    margin: 0;
    background-color:aliceblue;
}

.delete-button {
  height: 100%;
}
</style>